<template>
  <view class="container">
    <!-- 视频播放器 -->
    <video
      :src="videoUrl"
      controls
      autoplay
      class="video-element"
      v-if="videoUrl"
    ></video>

    <!-- 视频标题 -->
    <view class="video-title">{{ videoTitle }}</view>

    <!-- 视频描述 -->
    <view class="video-description">
      {{ videoDescription }}
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'

// 响应式变量，存储视频 URL、标题和描述
const videoUrl = ref('')
const videoTitle = ref('视频标题')
const videoDescription = ref('这是视频的详细描述，可以在这里介绍视频的内容和信息。')

// 使用 onMounted 获取页面参数
onMounted(() => {
  // 获取当前页面栈
  const pages = getCurrentPages();
  if (pages.length > 0) {
    // 获取当前页面实例
    const currentPage = pages[pages.length - 1];

    // 获取页面参数（通过 options 传递）
    if (currentPage && currentPage.options) {
      if (currentPage.options.videoUrl) {
        videoUrl.value = decodeURIComponent(currentPage.options.videoUrl);
      }
      if (currentPage.options.title) {
        videoTitle.value = decodeURIComponent(currentPage.options.title);
      }
      if (currentPage.options.description) {
        videoDescription.value = decodeURIComponent(currentPage.options.description);
      }

      console.log('Video URL:', videoUrl.value);
      console.log('Video Title:', videoTitle.value);
    }
  }
});


</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f0f0f0; /* 给整个容器一个浅灰色背景 */
}

.video-element {
  width: 100%;
  height: 300rpx; /* 你可以调整视频的高度 */
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  background-color: #000; /* 给视频区域一个黑色背景，避免未加载时空白 */
}

.video-title {
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20rpx;
  background-color: #fff; /* 给标题一个白色背景，突出标题 */
  padding: 10rpx;
  border-radius: 8rpx;
}

.video-description {
  font-size: 28rpx;
  color: #666;
  line-height: 40rpx;
  text-align: center;
  background-color: #ffffff; /* 给描述一个白色背景 */
  padding: 15rpx;
  border-radius: 8rpx;
}
</style>
